<template>
  <div>
    <div class="alert-box" :style="`width: ${$store.state.locale === 'en' ? '70px' : '46px'}`">
      <div class="alert-text" @click="toTop">
        <img width="19" :src="require(`@/assets/images/alert/icon-8.png`)" alt="" />
      </div>
      <a :href="`${origin}#/home`">
        <div class="alert-text">
          <img width="20" :src="require(`@/assets/images/alert/icon-7.png`)" alt="" />
          {{ $t('总览') }}
        </div>
      </a>
      <div class="alert-text" @click="tabs">{{ $t('功能地图') }}</div>
    </div>
    <el-dialog
      :visible.sync="data.isShow"
      custom-class="alert-box-model"
      :modal="false"
      :show-close="false"
      width="1200px"
      center
    >
      <div class="alert-left">
        <div v-for="(item, index) in data.boxList" :key="index" class="box">
          <div class="box-title">
            <!-- <img :src="item.icon" alt="" srcset=""> -->
            {{ item.name }}
          </div>
          <div class="box-body">
            <ul>
              <li v-for="(it, idx) in item.children" :key="idx">
                {{ it.name }}
                <div v-for="(i, n) in it.children" :key="n">
                  <a :href="`${origin}${i.path}`">{{ i.name }}</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { getUserMenus } from '@/api/user';

@Component({
  components: {},
})
export default class AlertBox extends Vue {
  origin = window.location.origin;
  data = {
    isShow: false,
    boxList: [],
  };

  async mounted() {
    let result = await getUserMenus();
    if (result) {
      let data = result;
      this.data.boxList = data;
    }
  }

  tabs = () => {
    this.data.isShow = !this.data.isShow;
  };
  toHome = () => {
    window.location.href = '';
  };
  toTop = () => {
    const timer: any = setInterval(() => {
      let osTop: any = document.documentElement.scrollTop || document.body.scrollTop;
      (document.documentElement.scrollTop as any) = osTop - 10;
      if (osTop <= 0) {
        clearInterval(timer);
      }
    }, 10);
  };
}
</script>
<style lang="less">
@import './index.less';
</style>
